<template>
	<view class="container">
		<view class="top_bg" :style="{ height: (statusBarHeight + 92) + 'px' }"></view>
		<!-- 导航栏 -->
		<view class="top_nav_bar">
			<view class="safe-area" :style="{ height: statusBarHeight + 'px' }"></view>
			<view class="nav_bar">
				<view class="top">
					<view class="pic">
						<image src="/static/index/nav_bg.png" mode="aspectFit"></image>
					</view>
				</view>
				<!-- <van-search :value="searchData" shape="round" background="#0000000" placeholder="请输入搜索关键词" /> -->
				<view class="search" @click="toSearch">
					<view class="inner">
						<van-icon name="search" />
						<view class="txt">
							请输入关键词搜索
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="content">
			<view class="safe-area" :style="{ height: (statusBarHeight + 92) + 'px' }"></view>
			<view class="content_bg"></view>
			<view class="inner">
				<view class="swiper">
					<!-- :indicator-dots="true" indicator-color="#E6E6E6" indicator-active-color="#FF1642" -->
					<uni-swiper-dot :info="categoryList" :current="current"
						:dotsStyles="{ backgroundColor: '#E6E6E6', selectedBackgroundColor: '#FF1642', bottom: 5 }">
						<swiper class="home-swiper" circular interval="5000" duration="200" @change="e => current = e.detail.current">
							<swiper-item v-for="(category, index) in categoryList" :key="index">
								<view class="swiper-item">
									<view class="item" v-for="item in category" :key="item.id" @click="toCategoryView(item.id)">
										<view class="pic">
											<image :src="item.imgUrl" mode="aspectFill"></image>
										</view>
										<view class="txt">
											<view class="van-ellipsis">{{ item.name }}</view>
										</view>
									</view>
								</view>
							</swiper-item>
						</swiper>
					</uni-swiper-dot>
				</view>
				<view class="twoItem">
					<view class="left" @click="toNewPage(0)">
						<view class="top">
							<view class="title">夏日热销</view>
							<view class="more">查看更多 <van-icon name="arrow" /></view>
						</view>
						<view class="center">
							<view class="one" v-for="item in recommendGoodsList" :key="item.id">
								<view class="pic">
									<image :src="item.images" mode="aspectFill"></image>
								</view>
								<view class="shop_title van-ellipsis">{{ item.name }}</view>
								<view class="price">
									<view class="sub_title">低至</view>
									<view class="price_info">
										<PriceFont color="#fff" bigSize="24rpx" smallSize="20rpx" :price="permissionStatus == '1' ? item.normsPrice
                      : '??.??'" />
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="right" @click="toNewPage(1)">
						<view class="top">
							<view class="title">
								精品商品
							</view>
							<view class="more">
								查看更多 <van-icon name="arrow" />
							</view>
						</view>
						<view class="center">
							<view class="one" v-for="item in noStandardGoodsList" :key="item.id">
								<view class="pic">
									<image :src="item.images" mode="aspectFill"></image>
								</view>
								<view class="shop_title van-ellipsis">{{ item.name }}</view>
								<view class="price">
									<view class="sub_title">低至</view>
									<view class="price_info">
										<PriceFont color="#fff" bigSize="24rpx" smallSize="20rpx" :price="permissionStatus == '1' ? item.normsPrice
                      : '??.??'" />
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="shop_list" style="padding-bottom: 100rpx;">
					<ShopCard v-for="(item, index) in goodsList" :key="item.id" :ecCommodityId="item.id" :ecCommodityType="item.type"
						:sellout="item.releaseStock === 0" :style="{ marginBottom: (index == goodsList.length - 1) ? 0 : '16rpx' }"
						@click.native="toDetail(item.id, item.releaseStock)" @refreshPage="refreshPage" @clickAddBtn="clickAddBtn" :animationStatus="start">
						<template #pic>
							<block>
								<image :src="item.images" mode="aspectFill"></image>
							</block>
						</template>
						<template #title>
							<block>{{ item.name }}</block>
						</template>
						<template #subtitle1>
							<block>{{ item.subTitle }}</block>
						</template>
						<template #subtitle2>
							<block>规格：{{ item.standard }} * {{ item.normsInfo }}</block>
						</template>
						<template #limit v-if="item.limitCount != 0">
							<block>每日限购：{{ item.limitCount }}</block>
						</template>
						<template #price>
							<block>
								<PriceFont color="#FF4F30" bigSize="40rpx" smallSize="28rpx" :price="permissionStatus == '1' ? item.normsPrice
                  : '??.??'" />
							</block>
						</template>
					</ShopCard>
					<uni-load-more :status="loading"></uni-load-more>
				</view>
			</view>
		</view>
		<view class="to_car">
			<!-- <view class="pic">
				<image src="/static/tabbar/shopcar.png" mode="aspectFill"></image>
			</view> -->
			<view class="pic" @click="toCarPage">
				<image :src="allCount != 0 ? '/static/tabbar/shopcar_active.png' : '/static/tabbar/shopcar.png'" mode="aspectFill" id="car">
				</image>
				<view class="point" v-if="allCount != 0">{{ allCount }}</view>
			</view>
			<PriceFont color="#FF4F30" bigSize="48rpx" smallSize="32rpx" :price="allMoney" />
			<view class="btn" :class="allCount != 0 ? 'active' : ''" @click="toCarPage">
				去下单
			</view>
		</view>
		<view class="btncar" :class="start ? 'move':''" :style="{top:curPos.top + 'px',left:curPos.left  + 'px',transform:xMove}">
			<view class="box" :class="start ? 'move':''" :style="{transform:yMove}">
				<van-icon name="shopping-cart-o" size="36rpx" />
			</view>
		</view>
	</view>
</template>

<script>
	// import { getStatus } from '@/utils/auth';
	import { mapGetters } from 'vuex'
	// import { reqOpenId } from '@/apis/user.js'
	import { reqCategoryTwo, reqGoodsList } from "@/apis/goods.js";
	import { reqRecommendGoodsList, reqGetNonStandardGoods } from '@/apis/rexiaogoods.js';
	import app from '@/App.vue';
	import addCarAniMix from '@/utils/addCarAniMix';
	export default {
		mixins:[addCarAniMix],
		data() {
			return {
				current: 0,
				// authstatus: getStatus(),
				statusBarHeight: app.globalData.statusBarHeight,
				categoryList: [],
				goodsList: [],
				page: {
					pageSize: 15,
					pageNum: 1,
					total: 0
				},
				loading: "loading",
				recommendGoodsList: [],
				noStandardGoodsList: [],
			}
		},
		computed: {
			...mapGetters('car', ['allMoney', 'allCount']),
			...mapGetters('user', ['permissionStatus'])
		},
		onShow() {
			this.$store.dispatch('user/getUserStatus');
		},
		onLoad() {
			// this.getProvider();
			// this.getPay();
			// this.getCode();
			// this.$store.dispatch('user/getUserStatus');
			const query = wx.createSelectorQuery()
			query.select("#car").boundingClientRect((res) => {
				this.targetPos = {top: res.top,left: res.left}
			}).exec();
			this.getCategoryTwo();
			this.getGoodsList();
			this.getRecommendCard();
			this.getGenericGoods();
		},
		onReachBottom() {
			console.log("到底部了")
			if (this.loading == "noMore") {
				return;
			}
			this.page.pageNum++;
			this.loading = "loading";
			this.getGoodsList();
		},
		onPullDownRefresh() {
			this.$store.dispatch('user/getUserStatus');
			this.goodsList = [];
			this.page.pageNum = 1;
			this.loading = "loading";
			this.categoryList = [];
			this.recommendGoodsList = [];
			this.noStandardGoodsList = [];
			this.getCategoryTwo();
			this.getGoodsList();
			this.getRecommendCard();
			this.getGenericGoods();
		},
		methods: {
			// 二级分类接口
			async getCategoryTwo() {
				let res = await reqCategoryTwo();
				if (res.code === 200) {
					let arr = [];
					let startIndex = 0;
					while (startIndex < res.data.length) {
						arr.push(res.data.slice(startIndex, startIndex + 10));
						startIndex += 10;
					}
					console.log('arr', arr);
					this.categoryList = arr;
				}
			},
			refreshPage() {
				this.goodsList = [];
				this.page.pageNum = 1;
				this.loading = "loading";
				this.categoryList = [];
				this.recommendGoodsList = [];
				this.noStandardGoodsList = [];
				this.getCategoryTwo();
				this.getGoodsList();
				this.getRecommendCard();
				this.getGenericGoods();
			},
			async getRecommendCard() {
				let res = await reqRecommendGoodsList({ pageNum: 1, pageSize: 2 });
				if (res.code === 200) {
					this.recommendGoodsList = res.data.list;
				}
			},
			async getGenericGoods() {
				let res = await reqGetNonStandardGoods({ pageNum: 1, pageSize: 2 });
				if (res.code === 200) {
					this.noStandardGoodsList = res.data.list;
				}
			},
			toCategoryView(id) {
				uni.reLaunch({ url: `/pages/category/category?id=${id}` })
			},
			async getGoodsList() {
				let { pageNum, pageSize } = this.page;
				const res = await reqGoodsList({ pageNum, pageSize })
				if (res.code === 200) {
					const data = res.data
					// 数组去重，防止上下架导致商品列表出现重复商品
					let arr = [...this.goodsList,...data.list];
					const map = new Map();
					const newArr = arr.filter(v => !map.has(v.id) && map.set(v.id, v));
					this.goodsList = newArr;
					// this.goodsList = [...this.goodsList, ...data.list]
					// 去重
					if (res.data.isLastPage) {
						this.loading = "noMore"
					}
					uni.stopPullDownRefresh();
				}
			},
			toDetail(id, releaseStock) {
				if (releaseStock <= 0) {
					uni.utils.toast("商品已售罄");
					return;
				}
				uni.navigateTo({ url: `/packageA/pages/goodsDetail/goodsDetail?id=${id}` })
			},
			toNewPage(type) {
				uni.navigateTo({ url: type === 0 ? '/packageA/pages/recommend/recommend' : '/packageA/pages/genericShopGood/genericShopGood' });
			},
			toSearch() {
				uni.navigateTo({ url: '/packageA/pages/allSearchPage/allSearchPage' })
			},
			toCarPage() {
				if (this.allCount == 0) return;
				uni.switchTab({ url: '/pages/shopCar/shopCar' })
			},
		}
	}
</script>
<style>
	page {
		background: #f5f5f5;
	}
</style>
<style lang="scss" scoped>
	.container {
		.top_bg {
			width: 750rpx;
			background: linear-gradient(270deg, #FF1616 0%, #FF2951 100%);
			position: fixed;
			z-index: 100;
		}

		.top_nav_bar {
			position: fixed;
			z-index: 200;
		}

		.nav_bar {
			width: 100%;

			.top {
				padding-left: 24rpx;
				height: 92rpx;
				display: flex;
				align-items: center;

				.pic {
					width: 288rpx;
					height: 38rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}

			.search {
				padding: 0 24rpx;

				.inner {
					width: 100%;
					height: 60rpx;
					padding-left: 24rpx;
					box-sizing: border-box;
					display: flex;
					align-items: center;
					border-radius: 50rpx;
					background-color: #fff;
				}

				.txt {
					font-size: 28rpx;
					color: #808080;
					margin-left: 18rpx;
				}
			}

			// /deep/ .van-search {
			// 	padding: 0 24rpx 24rpx 24rpx !important;
			// }

		}

		.content {
			.safe-area {
				background: linear-gradient(270deg, #FF1616 0%, #FF2951 100%);
			}

			.content_bg {
				width: 100%;
				height: 104rpx;
				position: absolute;
				background: linear-gradient(180deg, #FF2951 0%, rgba(255, 41, 81, 0) 100%);
				z-index: -100;
			}

			.inner {
				padding: 0 24rpx;
			}

			.swiper {
				height: 364rpx;
				width: 100%;
				background-color: #fff;
				border-radius: 32rpx;
				margin-bottom: 24rpx;

				.home-swiper {
					height: 364rpx;
				}

				.swiper-item {
					display: flex;
					padding: 4rpx 11rpx 28rpx 11rpx;
					flex-wrap: wrap;

					.item {
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						align-items: center;
						margin: 22rpx 20rpx 0 20rpx;

						.pic {
							width: 96rpx;
							height: 96rpx;
							margin-bottom: 12rpx;
							border-radius: 50%;
							background-color: #eee;

							image {
								width: 100%;
								height: 100%;
								border-radius: 50%;
							}
						}

						.txt {
							height: 34rpx;

							// width: 100rpx;
							view {
								font-weight: 400;
								font-size: 24rpx;
								color: #333333;
								line-height: 28rpx;
								width: 96rpx;
								text-align: center;
							}
						}
					}
				}
			}

			.twoItem {
				display: flex;
				justify-content: space-between;
				margin-bottom: 24rpx;

				.left {
					background: linear-gradient(180deg, #FFE3B8 0%, #FFFFFF 29%);
				}

				.right {
					background: linear-gradient(180deg, #EBF9DD 0%, #FFFFFF 28%);
				}

				.left,
				.right {
					padding: 16rpx;
					width: 340rpx;
					height: 330rpx;
					border-radius: 12rpx;
					box-sizing: border-box;

					.top {
						display: flex;
						justify-content: space-between;
						align-items: center;
						height: 40rpx;
						margin-bottom: 16rpx;

						.title {
							font-weight: bold;
							font-size: 28rpx;
							color: #333333;
							letter-spacing: 1px;
							text-align: left;
						}

						.more {
							font-size: 20rpx;
							color: #808080;
							font-weight: 500;
						}
					}

					.center {
						display: flex;
						justify-content: space-between;
						margin-bottom: 16rpx;

						.one,
						.two {
							width: 146rpx;

							.pic {
								width: 100%;
								height: 146rpx;
								border-radius: 8rpx;
								// position: relative;

								image {
									width: 100%;
									height: 100%;
									border-radius: 8rpx;
								}
							}

							.shop_title {
								width: 100%;
								margin: 16rpx 0;
								height: 34rpx;
								font-weight: 500;
								font-size: 24rpx;
								color: #121212;
								line-height: 34rpx;
							}

							.price {
								width: 100%;
								height: 36rpx;
								background-image: url('/static/index/price_icon.png');
								background-repeat: no-repeat;
								background-size: 100%;
								display: flex;
								align-items: center;

								.sub_title {
									font-weight: 500;
									font-size: 24rpx;
									color: #795006;
									width: 40%;
									white-space: nowrap;
									padding-left: 10rpx;
								}

								.price_info {
									flex: 1;
								}
							}
						}
					}
				}

			}
		}
	}

	.to_car {
		height: 100rpx;
		width: 750rpx;
		background-color: #fff;
		position: fixed;
		bottom: 0;
		padding: 0 24rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;

		.pic {
			width: 52rpx;
			height: 52rpx;
			position: relative;

			.point {
				position: absolute;
				top: -5rpx;
				right: -5rpx;
				font-weight: 500;
				font-size: 16rpx;
				color: #FFFFFF;
				width: 20rpx;
				height: 20rpx;
				background-color: #FF3030;
				border-radius: 50%;
				text-align: center;
				line-height: 20rpx;
			}

			image {
				width: 100%;
				height: 100%;
			}
		}

		.btn {
			margin-left: auto;
			width: 200rpx;
			height: 76rpx;
			border-radius: 38rpx;
			font-weight: 600;
			font-size: 32rpx;
			line-height: 76rpx;
			text-align: center;
			color: #808080;
			background: #DDDDDD;

			&.active {
				background: #ff1642;
				color: #fff;
			}
		}
	}
	.btncar {
		position: fixed;
		z-index: 2000;
		width: 48rpx;
		height: 48rpx;
		color: #fff;
		transition-timing-function: linear;
		.box {
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 50%;
			background-color: #FF1642;
			transition-timing-function: cubic-bezier(0.5,-1, 1, 1)
		}
	}
	.move {
		transition: all 0.6s;
	}
</style>